<template>
  <div class="home">
    <el-button size="large" :icon="CirclePlus" @click="open1">新建</el-button>
    <el-button size="large" :icon="Edit" @click="open2">修改</el-button>
    <el-button size="large" :icon="ArrowLeft">撤销</el-button>
    <el-button size="large" :icon="Delete">删除</el-button>
    <!-- 新建弹出框 -->
    <el-dialog v-model="dialogVisible" title="新建工作日报" width="60%" :before-close="handleClose">
      <div class="dialog_BOX">
        <el-form label-position="top" :model="formLabelAlign">
          <el-form-item label="今日优质客户">
            <el-input v-model="formLabelAlign.name" w />
          </el-form-item>
          <el-form-item label="今日完成情况（有效准客户、资料查询、电话量等）">
            <el-input v-model="formLabelAlign.region" />
          </el-form-item>
          <el-form-item label="Activity form">
            <el-input v-model="formLabelAlign.type" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
        </span>
      </template>
    </el-dialog>

    <div class="content">
      <div class="content_release">
        <!-- <el-checkbox-group v-model="checkedCities"> -->
        <div class="item">
          <div class="checkbox">
            <el-checkbox></el-checkbox>
          </div>
          <div class="term">
            <div class="item_name">
              <div class="flex">
                <div style="margin-top: 5px"><el-avatar :size="15" :src="circleUrl" /></div>
                <div>员工名称</div>
                <div class="me">我</div>
              </div>
              <div style="flex: 1"></div>
              <div class="time">2020-02-02 12:00</div>
            </div>
            <div class="customer">
              <div>客户名称</div>
              <div style="flex: 1"></div>
              <div>已发送</div>
            </div>
            <div class="substance">
              1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            </div>
          </div>
        </div>
        <div class="item">
          <div class="checkbox">
            <el-checkbox></el-checkbox>
          </div>
          <div class="term">
            <div class="item_name">
              <div class="flex">
                <div style="margin-top: 5px"><el-avatar :size="15" :src="circleUrl" /></div>
                <div>员工名称</div>
                <div class="me">我</div>
              </div>
              <div style="flex: 1"></div>
              <div class="time">2020-02-02 12:00</div>
            </div>
            <div class="customer">
              <div>客户名称</div>
              <div style="flex: 1"></div>
              <div>已发送</div>
            </div>
            <div class="substance">
              1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            </div>
          </div>
        </div>
        <div class="item">
          <div class="checkbox">
            <el-checkbox></el-checkbox>
          </div>
          <div class="term">
            <div class="item_name">
              <div class="flex">
                <div style="margin-top: 5px"><el-avatar :size="15" :src="circleUrl" /></div>
                <div>员工名称</div>
                <div class="me">我</div>
              </div>
              <div style="flex: 1"></div>
              <div class="time">2020-02-02 12:00</div>
            </div>
            <div class="customer">
              <div>客户名称</div>
              <div style="flex: 1"></div>
              <div>已发送</div>
            </div>
            <div class="substance">
              1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            </div>
          </div>
        </div>

        <!-- </el-checkbox-group> -->
      </div>
      <div class="publish">
        <div class="publish_head">
          <div class="publish_Avatar">
            <el-avatar :size="20" :src="circleUrl" style="margin-right: 5px" />崔强
          </div>
          <div class="border"></div>
          <div class="directly">旗舰大队/旗舰大队直属</div>
          <div class="border"></div>
          <div class="date">2020-02-02 12:00</div>
          <div style="flex: 1"></div>
          <div class="send">已发送</div>
        </div>
        <div class="high_customer">
          <div class="margin">
            <div class="flex-1">
              <div class="spot"></div>
              <div class="customer_kh">今日优质客户</div>
            </div>
            <div class="explain">
              要想写好作文，优秀的题材是少不了的，所以平常要多少读书，多看看作文，积累知识，才能写出好的作文，今天橙子就给大家收集了优秀的满分作文范文，快收藏起来阅读吧!
              满分作文感恩一抹花香
              清晨，几声鸟鸣声把我从梦中惊醒，一缕阳光从窗帘缝中偷偷钻进来，调皮地拨开我朦胧的睡眼。我知道天空已经放晴了。
              推开一扇窗，我看见了一片蔚蓝，几朵雪白的云朵在天空中悠闲地飘过。我呼吸着大自然所给予的新鲜空气，偶尔一缕略带凉意的清风，夹杂着一抹淡淡的花香，拂过脸庞，感觉无比惬意。这花香从哪里飘来?放眼望去，只见一片翠绿中，这儿一抹红，那儿一簇白，原来是三角梅和玉兰花开得正旺呢!若
            </div>
          </div>
        </div>
        <div class="high_customer">
          <div class="margin">
            <div class="flex-1">
              <div class="spot"></div>
              <div class="customer_kh">今日完成情况</div>
            </div>
            <div class="explain">
              要想写好作文，优秀的题材是少不了的，所以平常要多少读书，多看看作文，积累知识，才能写出好的作文，今天橙子就给大家收集了优秀的满分作文范文，快收藏起来阅读吧!
              满分作文感恩一抹花香
              清晨，几声鸟鸣声把我从梦中惊醒，一缕阳光从窗帘缝中偷偷钻进来，调皮地拨开我朦胧的睡眼。我知道天空已经放晴了。
              推开一扇窗，我看见了一片蔚蓝，几朵雪白的云朵在天空中悠闲地飘过。我呼吸着大自然所给予的新鲜空气，偶尔一缕略带凉意的清风，夹杂着一抹淡淡的花香，拂过脸庞，感觉无比惬意。这花香从哪里飘来?放眼望去，只见一片翠绿中，这儿一抹红，那儿一簇白，原来是三角梅和玉兰花开得正旺呢!若
            </div>
          </div>
        </div>
        <div class="padd">
          <div class="high_customer">
            <div class="margin1">
              <div class="flex-1">
                <div class="spot"></div>
                <div class="customer_kh">有效准客户</div>
              </div>
              <div>
                <div class="accurate">
                  <div class="Serial_number">1.</div>
                  <div class="accurate_company">青岛弘贸昇国际贸易有限公司</div>
                  <div class="accurate_level">A</div>
                  <div class="dm">
                    <span class="code">信用代码</span><span class="num">1654654LSD345436</span>
                  </div>
                </div>
                <div class="Valid">
                  <div>
                    <span class="default">联系人</span>
                    <span class="valid_content"> 客户姓名</span>
                  </div>
                  <div class="border"></div>
                  <div>
                    <span class="default">联系方式</span>
                    <span class="valid_content">188356849</span>
                  </div>
                  <div class="border"></div>
                  <div>
                    <span class="default">跟踪阶段</span>
                    <span class="valid_stage">到账成功</span>
                  </div>
                  <div class="border"></div>
                  <div>
                    <span class="default">客户来源</span>
                    <span class="valid_content">广告推广</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="accurate">
                  <div class="Serial_number">2.</div>
                  <div class="accurate_company">青岛弘贸昇国际贸易有限公司</div>
                  <div class="accurate_level">A</div>
                  <div class="dm">
                    <span class="code">信用代码</span><span class="num">1654654LSD345436</span>
                  </div>
                </div>
                <div class="Valid">
                  <div>
                    <span class="default">联系人</span>
                    <span class="valid_content"> 客户姓名</span>
                  </div>
                  <div class="border"></div>
                  <div>
                    <span class="default">联系方式</span>
                    <span class="valid_content">188356849</span>
                  </div>
                  <div class="border"></div>
                  <div>
                    <span class="default">跟踪阶段</span>
                    <span class="valid_stage">到账成功</span>
                  </div>
                  <div class="border"></div>
                  <div>
                    <span class="default">客户来源</span>
                    <span class="valid_content">广告推广</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="padd">
          <div class="high_customer">
            <div class="margin1">
              <div class="flex-1">
                <div class="spot"></div>
                <div class="customer_kh">今日签单客户进展情况</div>
              </div>
              <div>
                <div class="accurate">
                  <div class="Serial_number">1.</div>
                  <div class="block">
                    <div class="company">
                      <div class="private">私有</div>
                      <div class="accurate_company">青岛弘贸昇国际贸易有限公司</div>
                      <div class="accurate_level">A</div>
                      <div class="icon">
                        <el-icon><CircleCheck /></el-icon>全部开通
                      </div>
                      <div class="border"></div>
                      <div class="time">2020-02-02 12:00</div>
                      <div class="border"></div>
                      <div>
                        <span class="track">跟踪次数：</span>
                        <span class="frequency">5次</span>
                      </div>
                    </div>
                    <div class="box_1">
                      <div class="company_name">江苏梅兰化工有限公司合同名称</div>
                      <div class="well">跟踪阶段：成功签约</div>
                      <div class="border"></div>
                      <div class="well">跟踪目的：收集客户资料</div>
                      <div class="border"></div>
                      <div>
                        <span class="mode">跟踪方式:</span>
                        <span class="fontColor">电话沟通</span>
                      </div>
                    </div>
                    <div class="contract">
                      <div class="Signing">签约合同</div>
                      <div class="img">
                        <el-image style="width: 100px; height: 100px" class="tu1" :src="url" />
                        <el-image style="width: 100px; height: 100px" :src="url" />
                      </div>
                      <div>
                        <span class="wenjian"> 文件名称</span><span class="yulan">预览</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="padd">
          <div class="high_customer">
            <div class="margin1">
              <div class="flex-1">
                <div class="spot"></div>
                <div class="customer_kh">今日思考点</div>
              </div>
              <div>
                <div class="accurate reflection">
                  <div class="nei">
                    描述说明：客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容客户简叙内容
                  </div>
                  <div class="contract">
                    <div class="img">
                      <el-image style="width: 100px; height: 100px" class="tu1" :src="url" />
                      <el-image style="width: 100px; height: 100px" :src="url" />
                    </div>
                    <div><span class="wenjian"> 文件名称</span><span class="yulan">预览</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="affix-container">
          <el-affix target=".affix-container" :offset="80">
            查看上期报告<el-icon><ArrowDownBold /></el-icon>
          </el-affix>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="workReport">
import { CirclePlus, Edit, ArrowLeft, Delete } from '@element-plus/icons-vue'
import { reactive, toRefs, ref } from 'vue'
// import { ElNotification } from 'element-plus'
const url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const state = reactive({
  circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

const { circleUrl } = toRefs(state)
const dialogVisible = ref(false)
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const open1 = () => {
  dialogVisible.value = true
  // ElNotification({
  //   title: 'Success',
  //   message: '发送成功',
  //   type: 'success',
  // })
}

const open2 = () => {
  ElNotification({
    title: '修改成功',
    message: '点击查看详情',
    type: 'success',
  })
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
